// 目录和文件名：你的项目路径/FooterSection.jsx

// 导入MUI依赖
import { useTheme, styled } from '@mui/material/styles';
import { Box, Container, Grid, Chip, IconButton, Link, Stack, Typography } from '@mui/material';

// 导入项目依赖
import { frameworks } from './FrameworkSection';

// 导入图标
import PublicIcon from '@mui/icons-material/Public';
import TwitterIcon from '@mui/icons-material/Twitter';
import SportsBasketballIcon from '@mui/icons-material/SportsBasketball';
import Image from 'next/image'; // 如果你使用的是Next.js，可以使用Image组件进行优化
// Link - custom style
const FooterLink = styled(Link)(({ theme }) => ({
  color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.text.hint,
  '&:hover': {
    color: theme.palette.primary.main
  },
  '&:active': {
    color: theme.palette.primary.main
  }
}));

// =============================|| LANDING - FOOTER SECTION ||============================= //

const FooterSection = () => {
  const theme = useTheme();
  const textColor = theme.palette.mode === 'dark' ? 'text.secondary' : 'text.hint';

  return (
    <>
      <Container sx={{ mb: 15 }}>
        <Grid container spacing={6}>
          <Grid item xs={12}>
            <Grid container spacing={8}>
              <Grid item xs={12} md={4}>
                <Stack spacing={{ xs: 6, md: 5 }}>
                  <Typography variant="h4" color={textColor} sx={{ fontWeight: 500 }}>
                    关于
                  </Typography>
                  <Typography variant="body2" color={textColor}>
                    “花明云”是一个强大的低代码平台，它拥有上百个功能模块，它像一个魔法般的桥梁，可以帮助你轻松连接库存管理，订单管理，客户管理，ERP，财务管理，OA，供应链管理，等多个系统，以及抖音、微信、飞书等多款软件，连接
                    chatGPT,电子邮件，短信等多个功能，连接阿里云，腾讯云，华为云，科大讯飞，新东方等多个平台的服务。你可以自由组合这些模块，创建出属于你的智能工作流。
                  </Typography>
                </Stack>
              </Grid>
              <Grid item xs={12} md={8}>
                <Grid container spacing={{ xs: 5, md: 4 }}>
                  <Grid item xs={6} sm={3}>
                    <Stack spacing={{ xs: 6, md: 5 }}>
                      <Typography variant="h4" color={textColor} sx={{ fontWeight: 500 }}>
                        帮助
                      </Typography>
                      <Stack spacing={{ xs: 1.5, md: 2.5 }}>
                        <FooterLink href="#" target="_blank" underline="none">
                          博客
                        </FooterLink>
                        <FooterLink href="#" target="_blank" underline="none">
                          文档
                        </FooterLink>
                        <FooterLink href="#" target="_blank" underline="none">
                          更新日志
                        </FooterLink>
                        <FooterLink href="#" target="_blank" underline="none">
                          技术支持
                        </FooterLink>
                      </Stack>
                    </Stack>
                  </Grid>
                  {/* <Grid item xs={6} sm={3}>
                    <Stack spacing={{ xs: 3, md: 5 }}>
                      <Typography variant="h4" color={textColor} sx={{ fontWeight: 500 }}>
                        Store Help
                      </Typography>
                      <Stack spacing={{ xs: 1.5, md: 2.5 }}>
                        <FooterLink href="https://mui.com/store/license/" target="_blank" underline="none">
                          License
                        </FooterLink>
                        <FooterLink href="https://mui.com/store/customer-refund-policy/" target="_blank" underline="none">
                          Refund Policy
                        </FooterLink>
                        <FooterLink
                          href="https://support.mui.com/hc/en-us/sections/360002564979-For-customers"
                          target="_blank"
                          underline="none"
                        >
                          Submit a Request
                        </FooterLink>
                      </Stack>
                    </Stack>
                  </Grid> */}
                  {/* <Grid item xs={6} sm={3}>
                    <Stack spacing={{ xs: 3, md: 5 }}>
                      <Typography variant="h4" color={textColor} sx={{ fontWeight: 500 }}>
                        Doyun Eco-System
                      </Typography>
                      <Stack spacing={{ xs: 1.5, md: 2.5 }}>
                        {frameworks.map((item, index) => (
                          <FooterLink href={item.link} target="_blank" underline="none" key={index}>
                            {item.title}
                            {item.isUpcoming && <Chip variant="outlined" color="primary" size="small" label="Upcoming" sx={{ ml: 0.5 }} />}
                          </FooterLink>
                        ))}
                      </Stack>
                    </Stack>
                  </Grid> */}
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Container>
      <Box sx={{ bgcolor: 'white', py: { xs: 3, sm: 1.5 } }}>
        <Container>
          <Stack
            direction={{ xs: 'column', sm: 'row' }}
            alignItems="center"
            justifyContent="center" // 已将这里的值改为 "center"
            spacing={{ xs: 1.5, sm: 1, md: 3 }}
          >
            <Box
              p={2} // 已添加内边距，使文本更美观
            >
              <Typography>
                {/* 添加了备案图标和备案号的链接 */}
                Copyright @2023 河北柳暗花明文化发展有限公司
                <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                  <Image src="/assets/images/filings-icon.png" alt="备案图标" width={16} height={16} /> {/* 图标 */}
                </a>
                <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                  冀ICP备2023027159号
                </a>
              </Typography>
            </Box>
          </Stack>
        </Container>
      </Box>
    </>
  );
};
export default FooterSection;
